<script setup lang="ts">
import BlogTag from "@/components/BlogTag.vue";
import {PropType} from "vue";
import CategoryTag from "@/components/CategoryTag.vue";
import day from "@/utils/dateUtils.ts";
defineProps({
  article: {
    type: Object as PropType<Article>,
    default: () => {
      return {
        id: 1,
        title: "Docker入门",
        userId: 1,
        imgUrl: "https://img.mikufufu.com/image/top-test.webp",
        articleOverview: "1.docker概述1.1基本介绍Docker是一个开源的应用容器引擎，基于G0语言并遵从che2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，\r\n          然后发布到任何流行的Liuⅸ机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口，更重要的是...",
        articleContent: "1.docker概述1.1基本介绍Docker是一个开源的应用容器引擎，基于G0语言并遵从che2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，\r\n          然后发布到任何流行的Liuⅸ机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口，更重要的是...",
        publishDate: "2024-06-26 16:00:00",
        categoryName: "后端技术",
        categoryIcon: "code",
        iconColor: "#165DFF",
        userAvatar: "https://img.mikufufu.com/image/avatar.jpg",
        userName: "超级管理员",
        tagNames: [
          "学习笔记",
          "Java"
        ]
      } as Article
    }
  }
})
</script>

<template>
  <div class="top-article">
    <div class="top-article-cover">
      <img :src="article.imgUrl" alt="">
    </div>
    <div class="top-article-info">
      <div class="top-article-tag">
        <CategoryTag :icon="article.categoryIcon" :text="article.categoryName" :color="article.iconColor"/>
        <BlogTag v-for="(tag,index) in article.tagNames" :key="index" :text="tag" transparent/>
      </div>
      <div class="top-article-title" @click="$router.push(`/article/info/${article.id}`)">
        {{ article.title }}
      </div>
      <div class="top-article-desc">
        <p>{{ article.articleOverview }}</p>
      </div>
      <div class="top-article-footer">
        <div class="top-article-author">
          <img :src="article.userAvatar" alt="">
          <div class="top-article-author-name">
            {{ article.userName }}
          </div>
        </div>
        <div class="top-article-date">
          {{ day(article.publishDate).format('YYYY年MM月DD日') }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.top-article {
  position: relative;
  margin-top: 18px;
  width: 964px;
  aspect-ratio: 964/426;
  //max-height: 426px;
  //height: 426px;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  &:hover {
    .top-article-cover img{
      transition: all 0.35s ease; /* 添加过渡效果 */
      filter: brightness(0.8);
      transform: scale(1.05);
    }
  }
  .top-article-cover {
    position: relative; // 设置元素的定位为相对定位
    z-index: 1;
    width: 100%;
    min-width: 33.3%;
    height: 100%;
    overflow: hidden;
    //flex: 0.33;
    img {
      aspect-ratio: 3/4;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      z-index: 5; /* 设置元素的堆叠顺序为5 */
      content: "";
      position: absolute; /* 设置元素的定位为绝对定位 */
      top: 0; /* 设置元素距离顶部的距离为0 */
      right: 0; /* 设置元素距离右边的距离为0 */
      width: 15%; /* 设置元素的宽度为15% */
      height: 100%; /* 设置元素的高度为100% */
      background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* 设置元素的背景为线性渐变，从白色到透明 */
    }
  }
  .top-article-info {
    //flex: 0.66;
    padding: 24px;
    box-sizing: border-box;
    .top-article-tag {
      display: flex;
      align-items: center;
      .article-category{
        margin-right: 12px;
      }
      .tag {
        margin-left: 8px;
      }
    }
    .top-article-title {
      margin-top: 16px;
      width: 200px;
      height: 54px;
      font-size: 36px;
      font-weight: bold;
      line-height: 52px;
      color: #333333;
      &:hover {
        color: #EB5C88;
        cursor: pointer;
        transition: color 0.35s ease;
      }
    }
    .top-article-desc {
      margin-top: 24px;
      font-size: 16px;
      color: #666666;
      & > p{
        line-height: 40px;
        overflow: hidden; /* 溢出部分隐藏 */
        display: -webkit-box; /* 兼容性 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
      }
    }
    .top-article-footer {
      position: absolute;
      bottom: 24px;
      height: 28px;
      margin-top: 24px;
      display: flex;
      //justify-content: space-between;
      .top-article-author {
        display: flex;
        align-items: center;
        img {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
        .top-article-author-name {
          margin-left: 8px;
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
          color: #333333;
        }
      }
      .top-article-date {
        margin-left: 24px;
        font-size: 14px;
        line-height: 28px;
        color: #666666;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .top-article {
    width: 100%;
  }
  .top-article-title{
    font-size: 36px !important;
    line-height: 32px !important;
    margin-top: 14px !important;
  }
  .top-article-desc{
    display: none;
  }
  .top-article-footer {
    .top-article-date{
      display: none;
    }
  }
  .top-article-info {
    .top-article-tag{
      .tag{
        display: none;
      }
    }
  }
}
@media screen and (min-width: 1600px) {
  .home .content .top .top-article {
    width: 1132px;
  }
}
</style>
